<template>
  <input type="text" :value="value" @input="inputChange">
</template>

<script>
import { ref, watch } from 'vue'
export default {
  name: 'e-input',
  props: {
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    const value = ref(props.modelValue)
    watch(
      () => props.modelValue,
      () => {
        value.value = props.modelValue
      }
    )
    function inputChange (e) {
      console.log(e.target.value)
      // 触发事件
      emit('update:modelValue', e.target.value)
      emit('change', e.target.value)
    }
    return {
      value,
      inputChange
    }
  }
}
</script>
